<template>
  <div>
    <div class="mt-3">
      <el-table
              :data="eqTableData"
              v-loading="loading"
              align="center"
              :element-loading-text="loadText"
              :header-cell-style="tableHeaderColor"
              stripe
              style="width: 100%">
        <el-table-column
                prop="id"
                align="center"
                label="编号"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="mac"
                align="center"
                label="mac"
        >
        </el-table-column>
        <el-table-column
                prop="phone_type"
                align="center"
                label="机型"
        >
        </el-table-column>
        <el-table-column
                prop="step_time"
                align="center"
                sortable
                label="驻留时间(s)"
        >
        </el-table-column>
        <el-table-column
                prop="distance"
                align="center"
                sortable
                label="距离(m)"
        >
        </el-table-column>
        <el-table-column
                label="添加时间"
                align="center"
                width="100">
          <template slot-scope="scope">
            <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(0, 11):'无'}}</div>
            <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(11 ):'无'}}</div>
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="最后访问时间"
        >
          <template slot-scope="scope">
            <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(0, 11):'无'}}</div>
            <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(11 ):'无'}}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-3 float-right">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.current_page"
                :page-size="pageInfo.per_page"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total">
        </el-pagination>
      </div>
    </div>
    <!--新增对话框-->
    <el-dialog title="设备详情"
               :visible.sync="dialogFormVisible"
               :close-on-click-modal="false"
               width="600px">
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "eq-list",
        props: {
            eqTableData: {
                type: Array,
                default: () => {
                    return []
                }
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                pageInfo: {
                    per_page: 10,
                    total: 0,
                    current_page: 1
                },
                loadText: '数据加载中',

                searchStr: '',
                dialogFormVisible: false,
                search:{
                    scenic:'', //景区名或地址
                }
            }
        },
        created() {
        },
        methods: {
            checkDetail(val) {
                this.dialogFormVisible = true;
            },
            handleSizeChange(val) {
                this.pageInfo.current_page = 1;
                this.pageInfo.per_page = val;
                this.getAccountList();
            },
            handleCurrentChange(val) {
                this.pageInfo.current_page = val;
                this.getAccountList();
            },
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return 'background-color: #FAFAFA;color: #000;font-weight: 500;height:54px;font-size:14px'
                }
            }
        }
    }
</script>

<style lang="less">
.check:hover{
  color: #66b1ff;
  cursor: pointer;
  text-decoration: underline;
}
</style>